前端可不是功能需求都完成了就完事，Load 超慢、動畫卡卡的、點擊按鈕過了一秒才有反應等等都會讓使用者默默在心中給網站體驗扣分，尤其是第一次瀏覽時更可能直接關掉。

概覽

一般來說想要進行網頁優化最簡單有效的方式是從 Lighthouse 開始，Lighthouse 會以網頁效能指標為目前的頁面打分數，同時給出優化的建議方向，開發者可以透過提升分數逐步優化網頁的效能。

而 Performance 面板則為更深入的效能測量工具，通常會在針對特定功能進行優化或是像製作網頁遊戲，每一個 Function 的效能都必須斟酌時才會利用 Performance 頁面來獲取瀏覽器運作時的各種細節資訊。

在 Performance 系列中，將會分為以下幾個主題：

• Overview – 總覽
• Web Vitals – 網頁體驗指標
• Critical Rendering Path – 瀏覽器從拿到 HTML 到開始顯示畫面前做了什麼
• How Rendering Works – 瀏覽器更新畫面的詳細流程
• Rendering Optimization – 如何優化 Rendering 流程
• Analyze Paint & Layers – 分析、優化畫面繪製效能
• Analyze Memory – 分析記憶體造成的效能問題
• Analyze Runtime Activities – 分析瀏覽器和 JavaScript 的執行效能

開始測量

使用 Performance 面板進行效能測量有兩種起手式：

• 頁面初始化 – 先進入 about:blank 頁面，開始 Record 後再進入想要測量的網址，完全避掉任何干擾，或是直接點擊 Start profiling and reload page 圖示。
• 針對功能 – 先開始 Record，操作該功能後停止。

Record 停止後會產生效能測量報表，可以用滑鼠拖曳上下拖曳看看其他列，左右拖曳移動時間區間，滾輪則是縮放時間區間，剛開始使用時需要熟悉一下操作方式，裡面包含了許多資訊，就先從上方密密麻麻的圖表開始講起吧。

圖表資訊

圖表資訊中上方幾列簡單顯示了 FPS、CPU、NET 和網頁效能有直接關係的資訊。

FPS

瀏覽器正常執行下，網頁會保持在 60 FPS，由於瀏覽器是單線程的，但又必須解析、執行程式碼、計算樣式、畫出頁面中的每一個像素等等，只要瀏覽器在動畫進行中過於忙碌，一個畫面超過 16ms(1000/60) 才能畫完，頁面就會掉幀，使用者感到會開始感受到卡頓。

回到面板中，FPS 列綠色的方塊代表當下的 FPS 變化，不過 FPS 為 0 時並不代表頁面卡住了，通常是畫面真的沒在動，而上方的粉、紅色塊是掉幀提醒，也就是可能會讓使用者感受到卡頓的部分。

CPU

CPU 列可以看出 CPU 使用率的變化，圖形會以顏色來區分種類，主要有：

• 灰色 – 瀏覽器內部的工作
• 藍色 – HTML 請求、處理
• 黃色 – 事件、執行 JavaScript
• 綠色 – 圖像處理、畫面繪製
• 紫色 – 樣式計算

NET

藍色的部分代表有請求正在進行，可以展開下方的 Network 看到更詳細的資訊。

截圖

Hover 在 Frames 列上能夠觀察特定時間點的畫面，左右 Hover 就能觀察頁面的變化，就像重播一樣，適合用來找出想要觀察的時間區間，展開下方的 Frames 有更多資訊。

詳細資訊

下方開始會提供較詳細的資訊，Network、Frames、Interaction、Timings、Main 等等，在任一列點擊裡面的區塊都會依據類型在最下方展開詳細資訊面板。

點擊 Main 列區塊看到的 Summary 分頁，顯示了 Task 花費的時間以及細分的小工作類型

Network

就像是 Network 面板的 Log，排列了各個資源的時間和依賴關係，點擊後可以看到 URL、Duration（包含傳輸時間和讀取時間）、Priority、資源大小等等。

關於 Connection Start、TTFB、Content Download，依賴關係等 Network 相關資訊在 Network - Analyze Requests 有更詳細的解釋。

Frames

相較截圖像是固定時間截一張當下的圖，Frames 會顯示哪些時間點產生了新的畫面以及一個 Frame 持續了多久，另外也有 DPS 和 CPU 相關資訊。

Timings

Timings 是網頁體驗的重要指標，仔細看整份圖表其實圖中的每個 Timing 都是貫穿整份報告的時間線，分別有：

• FP – 繪出預設背景顏色之外的任何內容時
• FCP – 繪出任何文字、圖片、有顏色的 Canvas 時
• DOMContentLoaded (DCL) – HTML 已經載入且解析完畢時
• onload (L) – 解析 HTML 後請求的資源都載入完成時
• LCP – 繪出頁面中最大的內容時（Hover LCP 時會顯示對應的元素）

另外面板下方還有一個 Total blocking time (TBT)，代表主線程被阻塞過久的時間總和。

此處提到的 FCP、LCP、TBT 等等，在系列文章 Web Vitals 有更詳細的介紹。

Experience

CLS 代表頁面中元素在讀取過程的位移量，越低代表頁面穩定性越高，相對使用者體驗越好。

和上方提到的 FCP 同為 Core Web Vitals 的一員。

GPU

瀏覽器運作過程中有用到 GPU 的部分，在網址列輸入 chrome://gpu 可以看到目前瀏覽器中有哪些功能開啟硬體加速（Graphics Feature Status），下方會有更多關於 GPU 的資訊。

Raster & Compositor

此兩列和頁面顯示息息相關，大家可能知道使用者和網頁互動時，瀏覽器為了更新畫面大致會經過以下步驟：

• JavaScript
• Style
• Layout
• Paint
• Composite

其中每一個步驟都做了什麼事情，有哪些 JavaScript 的操作可能嚴重影響效能，有些動畫可以略過部分步驟，只需要 Composite，將會在系列文章 Critical Rendering Path 、Painting & Layers 中解惑。

小結

今天大致說明了 Performance 面板提供的資訊，系列文章中將會把效能問題區分為不同主題，更完整的說明如何觀察、分析效能問題。